<template>
  <el-dialog
    v-model="isVisible"
    :close-on-click-modal="false"
    append-to-body
    title="撤销任务"
    width="600"
    class="dialogForm"
    :before-close="beforeClose"
  >
    <el-form
      :model="addFrom"
      :rules="rulesForm"
      label-width="110px"
      ref="ruleFormRef"
    >
      <el-form-item label="撤销原因" prop="remark">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="addFrom.remark"
          maxlength="300"
          show-word-limit
          :rows="4"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="beforeClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="btnLoading">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="addRevocation">
import { addTaskList, getTaskDetail, cancelTask } from '@/api/taskManage/task'
import { ref, reactive, computed, getCurrentInstance, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import useCommonStore from '@/store/modules/common'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const data = reactive({
  isVisible: false,
  addFrom: {
    remark: ''
  },
  selectOptionObj: {}, // select
  dialogParam: {},
  // 表单校验
  rulesForm: {
    remark: [{ required: true, message: '撤销原因不能为空', trigger: 'blur' }]
  }
})
const { addFrom, rulesForm, isVisible } = toRefs(data)
const props = defineProps({
  revocationFrom: {
    type: Object
  }
})
watch(
  () => props.revocationFrom,
  val => {
    if (JSON.stringify(props.revocationFrom) != '{}') {
      console.log('props.revocationFrom', props.revocationFrom)
      init()
    }
  },
  {
    deep: true,
    immediate: true
  }
)

const btnLoading = ref(false) //按钮加载状态

function init() {
  isVisible.value = props.revocationFrom.isVisible
}
init()
//保存
function handleSubmit() {
  proxy.$refs['ruleFormRef'].validate(valid => {
    if (valid) {
      let params = {
        id: props.revocationFrom.taskId,
        remark: addFrom.value.remark
      }
      btnLoading.value = true
      cancelTask(params)
        .then(res => {
          proxy.$modal.msgSuccess('操作成功')
          btnLoading.value = false
          router.push({
            path: '/rsgl/other/taskManage'
          })
        })
        .catch(res => {
          btnLoading.value = false
          beforeClose()
        })
    }
  })
}
//关闭
function beforeClose() {
  proxy.$emit('handleClose')
}
</script>
